<!--
 * @Author: windys
 * @Description: 
 * @Date: 2022-02-19 16:40:04
-->
<template>
  <div>
    <van-sticky>
      <van-nav-bar
        :title="data.articleTitle"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
      />
    </van-sticky>

    <Content ref="Content" :data="data" @buySucc="getArticleContent" />

    <Reward ref="reward" @handleReward="handleReward"></Reward>

    <CommentList
      :list="commentList"
      @handleSendText="handleSendText"
      ref="CommentList"
    />
  </div>
</template>


<script >
import { defineComponent, getCurrentInstance, onMounted, ref } from "vue";
import {
  getArticleDetail,
  getArticleCommentList,
  sendComment,
  zsArticle,
} from "@/api/article";
import { useRoute, useRouter } from "vue-router";
import { Toast } from "vant";
import Content from "./Content.vue";
export default defineComponent({
  components: {
    Content,
  },
  setup() {
    onMounted(() => {
      init();
    });
    const proxy = getCurrentInstance();
    console.log(proxy.appContext.config.globalProperties.$user);
    const route = useRoute();
    const router = useRouter();
    const data = ref({});
    const commentList = ref([]);
    const init = async () => {
      getArticleContent();
      getCommentList();
    };

    // 详情
    const getArticleContent = async () => {
      const res = await getArticleDetail({
        articleId: route.query.articleId,
      });
      if (typeof res === "object") {
        data.value = res;
      }
    };

    const getCommentList = async () => {
      // 评论
      const comment = await getArticleCommentList({
        articleId: route.query.articleId,
        pageIndex: 1,
        pageSize: 100,
      });
      if (typeof comment !== "number") {
        commentList.value = comment;
      }
    };

    const CommentList = ref();
    const handleSendText = async (v) => {
      const res = await sendComment({
        articleId: route.query.articleId,
        commentName: proxy.appContext.config.globalProperties.$user.nick,
        content: v,
        headUrl: proxy.appContext.config.globalProperties.$user.headUrl,
      });
      if (typeof res !== "number") {
        Toast.success("评论成功");
        CommentList.value.clear();
        getCommentList();
      }
    };

    const handleReward = async (v) => {
      const res = await zsArticle({
        articleId: route.query.articleId,
        price: v,
      });
      if (typeof res == "object" ) {
        Toast.success("赞赏成功");
      }
    };
    const onClickLeft = () => {
      router.go(-1);
    };
    return {
      data,
      commentList,
      CommentList,
      onClickLeft,
      handleSendText,
      handleReward,
      getArticleContent,
    };
  },
});
</script>



<style lang="scss" scoped>
</style>